<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <Header />
    <!-- 左侧菜单栏 -->
    <Sidebar />
    <!-- 主要内容区域 -->
    <main class="ml-64 pt-16 px-6 py-8">
      <!-- 面包屑导航 -->
      <div class="flex items-center text-sm text-gray-500 mb-6">
        <a href="#" class="hover:text-primary">首页</a>
        <span class="mx-2">/</span>
        <a href="#" class="hover:text-primary">模型管理</a>
        <span class="mx-2">/</span>
        <span class="text-gray-700">模型生命周期</span>
      </div>
      <!-- 页面标题和操作按钮 -->
      <div class="flex justify-between items-center mb-8">
        <h1 class="text-2xl font-bold text-gray-900">模型生命周期管理</h1>
        <div class="flex space-x-3">
          <button id="refreshButton"
            class="flex items-center px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">
            <div class="w-4 h-4 flex items-center justify-center mr-2">
              <i id="refreshIcon" class="ri-refresh-line"></i>
            </div>
            刷新
          </button>
          <!-- Toast notification -->
          <div id="toast"
            class="fixed top-4 right-4 z-50 transform transition-all duration-300 translate-x-[150%] opacity-0 invisible">
            <div class="flex items-center p-4 rounded-lg shadow-lg bg-white border border-gray-100">
              <div id="toastIcon" class="w-6 h-6 flex items-center justify-center mr-3"></div>
              <p id="toastMessage" class="text-sm font-medium"></p>
            </div>
          </div>
          <button
            class="flex items-center px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">
            <div class="w-4 h-4 flex items-center justify-center mr-2">
              <i class="ri-add-line"></i>
            </div>
            注册模型
          </button>
        </div>
      </div>
      <!-- 概览卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-sm font-medium text-gray-500">模型总数</p>
              <p class="text-2xl font-bold text-gray-900 mt-1">48</p>
            </div>
            <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary">
              <i class="ri-cup-line ri-lg"></i>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-xs text-gray-500">较上月 <span class="text-green-500">+12.5%</span></p>
          </div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-sm font-medium text-gray-500">已部署模型</p>
              <p class="text-2xl font-bold text-gray-900 mt-1">32</p>
            </div>
            <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-green-50 text-green-500">
              <i class="ri-rocket-line ri-lg"></i>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-xs text-gray-500">部署率 <span class="text-green-500">66.7%</span></p>
          </div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-sm font-medium text-gray-500">待优化模型</p>
              <p class="text-2xl font-bold text-gray-900 mt-1">8</p>
            </div>
            <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-yellow-50 text-yellow-500">
              <i class="ri-tools-line ri-lg"></i>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-xs text-gray-500">较上月 <span class="text-red-500">+2</span></p>
          </div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-sm font-medium text-gray-500">已退役模型</p>
              <p class="text-2xl font-bold text-gray-900 mt-1">12</p>
            </div>
            <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-red-50 text-red-500">
              <i class="ri-archive-line ri-lg"></i>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-xs text-gray-500">资源回收率 <span class="text-green-500">100%</span></p>
          </div>
        </div>
      </div>
      <!-- 模型状态分布图表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-lg font-medium text-gray-900">模型状态分布</h2>
            <div class="flex space-x-2">
              <button
                class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">本周</button>
              <button
                class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">本月</button>
              <button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">全部</button>
            </div>
          </div>
          <div id="modelStatusChart" class="h-64"></div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-lg font-medium text-gray-900">模型框架分布</h2>
          </div>
          <div id="modelFrameworkChart" class="h-64"></div>
        </div>
      </div>
      <!-- 模型列表 -->
      <div class="bg-white rounded-lg shadow-sm mb-8">
        <div class="flex justify-between items-center p-6 border-b border-gray-100">
          <h2 class="text-lg font-medium text-gray-900">模型列表</h2>
          <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2">
              <button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-white">
                <i class="ri-layout-grid-line"></i>
              </button>
              <button id="listViewBtn"
                class="w-8 h-8 flex items-center justify-center rounded bg-gray-100 text-gray-500 hover:bg-gray-200">
                <i class="ri-list-check-2"></i>
              </button>
            </div>
            <div>
              <select
                class="pl-3 pr-8 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none bg-white">
                <option>最近更新</option>
                <option>名称排序</option>
                <option>性能排序</option>
              </select>
            </div>
          </div>
        </div>
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- 模型卡片 1 -->
          <div class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="p-4 border-b border-gray-100">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary mr-3">
                    <i class="ri-brain-line ri-lg"></i>
                  </div>
                  <div>
                    <h3 class="text-base font-medium text-gray-900">智能推荐模型</h3>
                    <p class="text-xs text-gray-500">v2.3.5</p>
                  </div>
                </div>
                <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-500">准确率</span>
                <span class="text-xs font-medium text-gray-700">92.7%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                <div class="bg-primary h-1.5 rounded-full" style="width: 92.7%"></div>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-4">
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">框架</p>
                  <p class="text-sm font-medium text-gray-700">PyTorch</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">大小</p>
                  <p class="text-sm font-medium text-gray-700">1.2 GB</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">创建时间</p>
                  <p class="text-sm font-medium text-gray-700">2025-05-12</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">版本数</p>
                  <p class="text-sm font-medium text-gray-700">8 个</p>
                </div>
              </div>
              <div class="flex justify-between">
                <button
                  class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                <div class="flex space-x-2">
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                    <i class="ri-edit-line"></i>
                  </button>
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-more-2-fill"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 模型卡片 2 -->
          <div class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="p-4 border-b border-gray-100">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-purple-50 text-purple-500 mr-3">
                    <i class="ri-image-recognition-line ri-lg"></i>
                  </div>
                  <div>
                    <h3 class="text-base font-medium text-gray-900">图像识别模型</h3>
                    <p class="text-xs text-gray-500">v1.8.2</p>
                  </div>
                </div>
                <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-500">准确率</span>
                <span class="text-xs font-medium text-gray-700">89.5%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                <div class="bg-primary h-1.5 rounded-full" style="width: 89.5%"></div>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-4">
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">框架</p>
                  <p class="text-sm font-medium text-gray-700">TensorFlow</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">大小</p>
                  <p class="text-sm font-medium text-gray-700">850 MB</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">创建时间</p>
                  <p class="text-sm font-medium text-gray-700">2025-04-28</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">版本数</p>
                  <p class="text-sm font-medium text-gray-700">5 个</p>
                </div>
              </div>
              <div class="flex justify-between">
                <button
                  class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                <div class="flex space-x-2">
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                    <i class="ri-edit-line"></i>
                  </button>
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-more-2-fill"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 模型卡片 3 -->
          <div class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="p-4 border-b border-gray-100">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-green-50 text-green-500 mr-3">
                    <i class="ri-chat-3-line ri-lg"></i>
                  </div>
                  <div>
                    <h3 class="text-base font-medium text-gray-900">NLP 对话模型</h3>
                    <p class="text-xs text-gray-500">v3.1.0</p>
                  </div>
                </div>
                <span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">待优化</span>
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-500">准确率</span>
                <span class="text-xs font-medium text-gray-700">78.3%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 78.3%"></div>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-4">
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">框架</p>
                  <p class="text-sm font-medium text-gray-700">PyTorch</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">大小</p>
                  <p class="text-sm font-medium text-gray-700">3.5 GB</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">创建时间</p>
                  <p class="text-sm font-medium text-gray-700">2025-06-02</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">版本数</p>
                  <p class="text-sm font-medium text-gray-700">12 个</p>
                </div>
              </div>
              <div class="flex justify-between">
                <button
                  class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                <div class="flex space-x-2">
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                    <i class="ri-edit-line"></i>
                  </button>
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-more-2-fill"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 模型卡片 4 -->
          <div class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="p-4 border-b border-gray-100">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-indigo-50 text-indigo-500 mr-3">
                    <i class="ri-bar-chart-grouped-line ri-lg"></i>
                  </div>
                  <div>
                    <h3 class="text-base font-medium text-gray-900">预测分析模型</h3>
                    <p class="text-xs text-gray-500">v1.2.7</p>
                  </div>
                </div>
                <span class="px-2 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full">测试中</span>
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-500">准确率</span>
                <span class="text-xs font-medium text-gray-700">85.1%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 85.1%"></div>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-4">
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">框架</p>
                  <p class="text-sm font-medium text-gray-700">Scikit-learn</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">大小</p>
                  <p class="text-sm font-medium text-gray-700">450 MB</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">创建时间</p>
                  <p class="text-sm font-medium text-gray-700">2025-06-15</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">版本数</p>
                  <p class="text-sm font-medium text-gray-700">3 个</p>
                </div>
              </div>
              <div class="flex justify-between">
                <button
                  class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                <div class="flex space-x-2">
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                    <i class="ri-edit-line"></i>
                  </button>
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-more-2-fill"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 模型卡片 5 -->
          <div class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="p-4 border-b border-gray-100">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-red-50 text-red-500 mr-3">
                    <i class="ri-sound-module-line ri-lg"></i>
                  </div>
                  <div>
                    <h3 class="text-base font-medium text-gray-900">语音识别模型</h3>
                    <p class="text-xs text-gray-500">v2.0.1</p>
                  </div>
                </div>
                <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-500">准确率</span>
                <span class="text-xs font-medium text-gray-700">91.2%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                <div class="bg-primary h-1.5 rounded-full" style="width: 91.2%"></div>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-4">
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">框架</p>
                  <p class="text-sm font-medium text-gray-700">TensorFlow</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">大小</p>
                  <p class="text-sm font-medium text-gray-700">2.1 GB</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">创建时间</p>
                  <p class="text-sm font-medium text-gray-700">2025-05-30</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">版本数</p>
                  <p class="text-sm font-medium text-gray-700">6 个</p>
                </div>
              </div>
              <div class="flex justify-between">
                <button
                  class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                <div class="flex space-x-2">
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                    <i class="ri-edit-line"></i>
                  </button>
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-more-2-fill"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 模型卡片 6 -->
          <div class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="p-4 border-b border-gray-100">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-orange-50 text-orange-500 mr-3">
                    <i class="ri-emotion-line ri-lg"></i>
                  </div>
                  <div>
                    <h3 class="text-base font-medium text-gray-900">情感分析模型</h3>
                    <p class="text-xs text-gray-500">v1.5.3</p>
                  </div>
                </div>
                <span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full">已退役</span>
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-500">准确率</span>
                <span class="text-xs font-medium text-gray-700">83.7%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                <div class="bg-gray-500 h-1.5 rounded-full" style="width: 83.7%"></div>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-4">
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">框架</p>
                  <p class="text-sm font-medium text-gray-700">ONNX</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">大小</p>
                  <p class="text-sm font-medium text-gray-700">720 MB</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">创建时间</p>
                  <p class="text-sm font-medium text-gray-700">2025-03-18</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">版本数</p>
                  <p class="text-sm font-medium text-gray-700">4 个</p>
                </div>
              </div>
              <div class="flex justify-between">
                <button
                  class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                <div class="flex space-x-2">
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-restart-line"></i>
                  </button>
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-more-2-fill"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 模型卡片 7 -->
          <div class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="p-4 border-b border-gray-100">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-teal-50 text-teal-500 mr-3">
                    <i class="ri-user-search-line ri-lg"></i>
                  </div>
                  <div>
                    <h3 class="text-base font-medium text-gray-900">用户画像模型</h3>
                    <p class="text-xs text-gray-500">v2.8.4</p>
                  </div>
                </div>
                <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-500">准确率</span>
                <span class="text-xs font-medium text-gray-700">94.8%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                <div class="bg-primary h-1.5 rounded-full" style="width: 94.8%"></div>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-4">
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">框架</p>
                  <p class="text-sm font-medium text-gray-700">PyTorch</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">大小</p>
                  <p class="text-sm font-medium text-gray-700">1.8 GB</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">创建时间</p>
                  <p class="text-sm font-medium text-gray-700">2025-05-08</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">版本数</p>
                  <p class="text-sm font-medium text-gray-700">9 个</p>
                </div>
              </div>
              <div class="flex justify-between">
                <button
                  class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                <div class="flex space-x-2">
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                    <i class="ri-edit-line"></i>
                  </button>
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-more-2-fill"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 模型卡片 8 -->
          <div class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
            <div class="p-4 border-b border-gray-100">
              <div class="flex justify-between items-start">
                <div class="flex items-center">
                  <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-pink-50 text-pink-500 mr-3">
                    <i class="ri-vidicon-line ri-lg"></i>
                  </div>
                  <div>
                    <h3 class="text-base font-medium text-gray-900">视频分析模型</h3>
                    <p class="text-xs text-gray-500">v1.0.9</p>
                  </div>
                </div>
                <span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">待优化</span>
              </div>
            </div>
            <div class="p-4">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-500">准确率</span>
                <span class="text-xs font-medium text-gray-700">76.2%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 76.2%"></div>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-4">
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">框架</p>
                  <p class="text-sm font-medium text-gray-700">TensorFlow</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">大小</p>
                  <p class="text-sm font-medium text-gray-700">4.2 GB</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">创建时间</p>
                  <p class="text-sm font-medium text-gray-700">2025-06-10</p>
                </div>
                <div class="bg-gray-50 p-2 rounded">
                  <p class="text-xs text-gray-500">版本数</p>
                  <p class="text-sm font-medium text-gray-700">2 个</p>
                </div>
              </div>
              <div class="flex justify-between">
                <button
                  class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                <div class="flex space-x-2">
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                    <i class="ri-edit-line"></i>
                  </button>
                  <button
                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="ri-more-2-fill"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-between items-center p-6 border-t border-gray-100">
          <div class="text-sm text-gray-500">
            显示 1-8 条，共 48 条
          </div>
          <div class="flex items-center space-x-2">
            <button
              class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 bg-white disabled:opacity-50"
              disabled>
              <i class="ri-arrow-left-s-line"></i>
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded border border-primary text-white bg-primary">
              1
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
              2
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
              3
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
              4
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
              <i class="ri-more-line"></i>
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
              <i class="ri-arrow-right-s-line"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- 最近活动 -->
      <div class="bg-white rounded-lg shadow-sm">
        <div class="flex justify-between items-center p-6 border-b border-gray-100">
          <h2 class="text-lg font-medium text-gray-900">最近活动</h2>
          <button
            class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-full hover:bg-blue-100 whitespace-nowrap !rounded-button">
            <div class="w-4 h-4 flex items-center justify-center mr-1 inline-block">
              <i class="ri-time-line"></i>
            </div>
            生命周期管理
          </button>
        </div>
        <div class="p-6">
          <div class="relative">
            <div class="absolute top-0 bottom-0 left-3 w-0.5 bg-gray-200"></div>
            <ul class="space-y-6">
              <li class="relative pl-10">
                <div class="absolute left-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
                  <i class="ri-rocket-line text-green-500"></i>
                </div>
                <div class="flex flex-col sm:flex-row sm:justify-between">
                  <div>
                    <p class="text-sm font-medium text-gray-900">部署了模型 <span class="text-primary">智能推荐模型 v2.3.5</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">由 张伟峰 完成</p>
                  </div>
                  <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-25 15:32</div>
                </div>
              </li>
              <li class="relative pl-10">
                <div class="absolute left-0 w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                  <i class="ri-edit-line text-blue-500"></i>
                </div>
                <div class="flex flex-col sm:flex-row sm:justify-between">
                  <div>
                    <p class="text-sm font-medium text-gray-900">更新了模型 <span class="text-primary">NLP 对话模型</span> 的参数配置
                    </p>
                    <p class="text-xs text-gray-500 mt-1">由 刘梦琪 完成</p>
                  </div>
                  <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-24 10:15</div>
                </div>
              </li>
              <li class="relative pl-10">
                <div class="absolute left-0 w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center">
                  <i class="ri-add-line text-purple-500"></i>
                </div>
                <div class="flex flex-col sm:flex-row sm:justify-between">
                  <div>
                    <p class="text-sm font-medium text-gray-900">注册了新模型 <span class="text-primary">预测分析模型 v1.2.7</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">由 王晓东 完成</p>
                  </div>
                  <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-23 16:48</div>
                </div>
              </li>
              <li class="relative pl-10">
                <div class="absolute left-0 w-6 h-6 rounded-full bg-red-100 flex items-center justify-center">
                  <i class="ri-archive-line text-red-500"></i>
                </div>
                <div class="flex flex-col sm:flex-row sm:justify-between">
                  <div>
                    <p class="text-sm font-medium text-gray-900">退役了模型 <span class="text-primary">情感分析模型 v1.5.3</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">由 赵雅婷 完成</p>
                  </div>
                  <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-22 09:23</div>
                </div>
              </li>
              <li class="relative pl-10">
                <div class="absolute left-0 w-6 h-6 rounded-full bg-yellow-100 flex items-center justify-center">
                  <i class="ri-tools-line text-yellow-500"></i>
                </div>
                <div class="flex flex-col sm:flex-row sm:justify-between">
                  <div>
                    <p class="text-sm font-medium text-gray-900">优化了模型 <span class="text-primary">图像识别模型</span> 的推理性能
                    </p>
                    <p class="text-xs text-gray-500 mt-1">由 孙博文 完成</p>
                  </div>
                  <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-21 14:05</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </main>
    <!-- 模型注册模态框 -->
    <div id="registerModelModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
      <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center p-6 border-b border-gray-100">
          <h3 class="text-lg font-medium text-gray-900">注册新模型</h3>
          <button id="closeRegisterModal" class="text-gray-400 hover:text-gray-500">
            <i class="ri-close-line ri-lg"></i>
          </button>
        </div>
        <div class="p-6">
          <div class="mb-6">
            <div class="flex justify-between items-center mb-2">
              <label class="block text-sm font-medium text-gray-700">模型基本信息</label>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">模型名称</label>
                <input type="text"
                  class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="输入模型名称">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">版本号</label>
                <input type="text"
                  class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="例如：v1.0.0">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">框架</label>
                <select
                  class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
                  <option>PyTorch</option>
                  <option>TensorFlow</option>
                  <option>ONNX</option>
                  <option>Scikit-learn</option>
                  <option>其他</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">模型类型</label>
                <select
                  class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
                  <option>分类模型</option>
                  <option>回归模型</option>
                  <option>检测模型</option>
                  <option>生成模型</option>
                  <option>其他</option>
                </select>
              </div>
            </div>
          </div>
          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1">模型描述</label>
            <textarea
              class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              rows="3" placeholder="输入模型的详细描述"></textarea>
          </div>
          <div class="mb-6">
            <div class="flex justify-between items-center mb-2">
              <label class="block text-sm font-medium text-gray-700">模型文件</label>
            </div>
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
              <div class="w-12 h-12 mx-auto mb-3 flex items-center justify-center rounded-full bg-blue-50 text-primary">
                <i class="ri-upload-cloud-line ri-2x"></i>
              </div>
              <p class="text-sm text-gray-500 mb-1">拖拽文件到此处或</p>
              <button
                class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">选择文件</button>
              <p class="text-xs text-gray-400 mt-2">支持 .pt, .pb, .onnx, .h5, .pkl 等格式</p>
            </div>
          </div>
          <div class="mb-6">
            <div class="flex justify-between items-center mb-2">
              <label class="block text-sm font-medium text-gray-700">高级设置</label>
              <button class="text-primary text-sm hover:text-blue-600">展开</button>
            </div>
          </div>
          <div class="flex justify-end space-x-3">
            <button id="cancelRegisterModel"
              class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
            <button
              class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">注册模型</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 模型详情模态框 -->
    <div id="modelDetailModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
      <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center p-6 border-b border-gray-100">
          <div class="flex items-center">
            <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary mr-3">
              <i class="ri-brain-line ri-lg"></i>
            </div>
            <div>
              <h3 class="text-lg font-medium text-gray-900">智能推荐模型</h3>
              <p class="text-sm text-gray-500">v2.3.5</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <button id="closeDetailModal" class="text-gray-400 hover:text-gray-500">
              <i class="ri-close-line ri-lg"></i>
            </button>
          </div>
        </div>
        <div class="flex border-b border-gray-100">
          <button class="tab-button px-6 py-3 text-sm font-medium tab-active" data-tab="overview">概览</button>
          <button class="tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700"
            data-tab="versions">版本管理</button>
          <button class="tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700"
            data-tab="performance">性能指标</button>
          <button class="tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700"
            data-tab="deployment">部署配置</button>
          <button class="tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700"
            data-tab="monitoring">监控数据</button>
        </div>
        <div class="p-6">
          <!-- 概览 Tab -->
          <div id="overview" class="tab-content active">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="md:col-span-2">
                <div class="mb-6">
                  <h4 class="text-sm font-medium text-gray-700 mb-2">模型描述</h4>
                  <p class="text-sm text-gray-600">
                    智能推荐模型是基于用户行为数据和物品特征，通过深度学习算法构建的个性化推荐系统核心模型。该模型采用多层神经网络结构，结合协同过滤和内容理解，能够准确捕捉用户兴趣变化和物品相似性，为用户提供高度个性化的推荐结果。
                  </p>
                </div>
                <div class="mb-6">
                  <h4 class="text-sm font-medium text-gray-700 mb-2">技术规格</h4>
                  <div class="grid grid-cols-2 gap-4">
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">框架</p>
                      <p class="text-sm font-medium text-gray-700">PyTorch</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">模型大小</p>
                      <p class="text-sm font-medium text-gray-700">1.2 GB</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">参数数量</p>
                      <p class="text-sm font-medium text-gray-700">1.5 亿</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">推理时间</p>
                      <p class="text-sm font-medium text-gray-700">25ms/请求</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">训练数据集</p>
                      <p class="text-sm font-medium text-gray-700">用户行为数据集 v3.2</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">最后更新时间</p>
                      <p class="text-sm font-medium text-gray-700">2025-05-12</p>
                    </div>
                  </div>
                </div>
                <div>
                  <h4 class="text-sm font-medium text-gray-700 mb-2">模型架构</h4>
                  <div class="bg-gray-50 p-4 rounded">
                    <img
                      src="https://readdy.ai/api/search-image?query=neural%20network%20architecture%20diagram%2C%20clean%20minimalist%20design%2C%20showing%20layers%20of%20a%20recommendation%20system%20with%20user%20embeddings%20and%20item%20embeddings%2C%20technical%20illustration%20with%20blue%20color%20scheme%2C%20white%20background%2C%20professional%20visualization&width=600&height=300&seq=2&orientation=landscape"
                      alt="模型架构图" class="w-full h-auto rounded">
                  </div>
                </div>
              </div>
              <div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                  <h4 class="text-sm font-medium text-gray-700 mb-3">模型状态</h4>
                  <div class="flex items-center justify-between mb-3">
                    <span class="text-sm text-gray-600">部署状态</span>
                    <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
                  </div>
                  <div class="flex items-center justify-between mb-3">
                    <span class="text-sm text-gray-600">健康状态</span>
                    <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">正常</span>
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">资源使用</span>
                    <span class="text-sm font-medium text-gray-700">中等</span>
                  </div>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                  <h4 class="text-sm font-medium text-gray-700 mb-3">性能指标</h4>
                  <div class="space-y-3">
                    <div>
                      <div class="flex justify-between items-center mb-1">
                        <span class="text-xs text-gray-500">准确率</span>
                        <span class="text-xs font-medium text-gray-700">92.7%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-1.5">
                        <div class="bg-primary h-1.5 rounded-full" style="width: 92.7%"></div>
                      </div>
                    </div>
                    <div>
                      <div class="flex justify-between items-center mb-1">
                        <span class="text-xs text-gray-500">召回率</span>
                        <span class="text-xs font-medium text-gray-700">88.3%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-1.5">
                        <div class="bg-primary h-1.5 rounded-full" style="width: 88.3%"></div>
                      </div>
                    </div>
                    <div>
                      <div class="flex justify-between items-center mb-1">
                        <span class="text-xs text-gray-500">F1 值</span>
                        <span class="text-xs font-medium text-gray-700">90.4%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-1.5">
                        <div class="bg-primary h-1.5 rounded-full" style="width: 90.4%"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 版本管理 Tab -->
          <div id="versions" class="tab-content">
            <div class="mb-6 flex justify-between items-center">
              <h4 class="text-lg font-medium text-gray-900">版本历史</h4>
              <button id="uploadVersionBtn"
                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">
                <div class="w-4 h-4 flex items-center justify-center mr-1 inline-block">
                  <i class="ri-add-line"></i>
                </div>
                上传新版本
              </button>
              <!-- 上传新版本模态框 -->
              <div id="uploadVersionModal"
                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
                  <div class="flex justify-between items-center p-6 border-b border-gray-100">
                    <h3 class="text-lg font-medium text-gray-900">上传新版本</h3>
                    <button id="closeUploadModal" class="text-gray-400 hover:text-gray-500">
                      <i class="ri-close-line ri-lg"></i>
                    </button>
                  </div>
                  <div class="p-6">
                    <div class="mb-6">
                      <label class="block text-sm font-medium text-gray-700 mb-1">版本号</label>
                      <input type="text" id="versionNumber"
                        class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        placeholder="例如：v2.3.6">
                    </div>
                    <div class="mb-6">
                      <label class="block text-sm font-medium text-gray-700 mb-1">版本说明</label>
                      <textarea id="versionDescription"
                        class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        rows="4" placeholder="请描述此版本的主要更新内容、性能改进等"></textarea>
                    </div>
                    <div class="mb-6">
                      <label class="block text-sm font-medium text-gray-700 mb-2">模型文件</label>
                      <div id="uploadArea" class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                        <div
                          class="w-12 h-12 mx-auto mb-3 flex items-center justify-center rounded-full bg-blue-50 text-primary">
                          <i class="ri-upload-cloud-line ri-2x"></i>
                        </div>
                        <p class="text-sm text-gray-500 mb-1">拖拽文件到此处或</p>
                        <button id="selectFileBtn"
                          class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">选择文件</button>
                        <input type="file" id="fileInput" class="hidden" accept=".pt,.pb,.onnx,.h5,.pkl">
                        <p class="text-xs text-gray-400 mt-2">支持 .pt, .pb, .onnx, .h5, .pkl 等格式，最大 5GB</p>
                      </div>
                      <div id="fileInfo" class="hidden mt-4 p-4 bg-gray-50 rounded-lg">
                        <div class="flex items-center justify-between">
                          <div class="flex items-center">
                            <i class="ri-file-line text-gray-400 mr-2"></i>
                            <div>
                              <p id="fileName" class="text-sm font-medium text-gray-700"></p>
                              <p id="fileSize" class="text-xs text-gray-500"></p>
                            </div>
                          </div>
                          <button id="removeFile" class="text-gray-400 hover:text-gray-500">
                            <i class="ri-close-line"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                    <div id="uploadProgress" class="hidden mb-6">
                      <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-700">上传进度</span>
                        <span id="progressPercent" class="text-primary">0%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="progressBar" class="bg-primary h-2 rounded-full transition-all duration-300"
                          style="width: 0%"></div>
                      </div>
                    </div>
                    <div class="flex justify-end space-x-3">
                      <button id="cancelUpload"
                        class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                      <button id="startUpload"
                        class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button"
                        disabled>开始上传</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">版本</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布时间</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">准确率</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布者</th>
                    <th scope="col"
                      class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.5</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-12</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">92.7%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2 GB</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">当前版本</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button class="text-primary hover:text-blue-600" onclick="openVersionDetails(this)">详情</button>
                    </td>
                  </tr>
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.4</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-04-28</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">91.5%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2 GB</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已归档</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button class="text-primary hover:text-blue-600 mr-3">回滚</button>
                      <button class="text-primary hover:text-blue-600" onclick="openVersionDetails(this)">详情</button>
                    </td>
                  </tr>
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.3</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-04-15</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90.8%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.1 GB</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已归档</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button class="text-primary hover:text-blue-600 mr-3">回滚</button>
                      <button class="text-primary hover:text-blue-600" onclick="openVersionDetails(this)">详情</button>
                    </td>
                  </tr>
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.2</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-03-30</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">89.2%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.1 GB</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已归档</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button class="text-primary hover:text-blue-600 mr-3">回滚</button>
                      <button class="text-primary hover:text-blue-600" onclick="openVersionDetails(this)">详情</button>
                    </td>
                  </tr>
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.1</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-03-15</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">87.5%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.0 GB</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已归档</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王晓东</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button class="text-primary hover:text-blue-600 mr-3">回滚</button>
                      <button class="text-primary hover:text-blue-600" onclick="openVersionDetails(this)">详情</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 性能指标 Tab -->
          <div id="performance" class="tab-content">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div class="bg-white border border-gray-200 rounded-lg p-4">
                <div class="flex justify-between items-center mb-4">
                  <h4 class="text-sm font-medium text-gray-700">准确率趋势</h4>
                  <div class="flex space-x-2">
                    <button
                      class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">7天</button>
                    <button
                      class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">30天</button>
                    <button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">全部</button>
                  </div>
                </div>
                <div id="accuracyChart" class="h-64"></div>
              </div>
              <div class="bg-white border border-gray-200 rounded-lg p-4">
                <div class="flex justify-between items-center mb-4">
                  <h4 class="text-sm font-medium text-gray-700">推理性能</h4>
                  <div class="flex space-x-2">
                    <button
                      class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">7天</button>
                    <button
                      class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">30天</button>
                    <button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">全部</button>
                  </div>
                </div>
                <div id="inferenceChart" class="h-64"></div>
              </div>
            </div>
            <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
              <div class="flex justify-between items-center mb-4">
                <h4 class="text-sm font-medium text-gray-700">多维度评估</h4>
                <button id="exportReportBtn" class="text-primary text-sm hover:text-blue-600">导出报告</button>
                <!-- 导出报告模态框 -->
                <div id="exportReportModal"
                  class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                  <div class="bg-white rounded-lg w-full max-w-md p-6">
                    <div class="flex justify-between items-center mb-6">
                      <h3 class="text-lg font-medium text-gray-900">导出性能报告</h3>
                      <button id="closeExportModal" class="text-gray-400 hover:text-gray-500">
                        <i class="ri-close-line ri-lg"></i>
                      </button>
                    </div>
                    <div class="space-y-6">
                      <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">导出格式</label>
                        <div class="grid grid-cols-3 gap-3">
                          <label
                            class="flex items-center justify-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary hover:bg-blue-50">
                            <input type="radio" name="exportFormat" value="pdf" class="hidden" checked>
                            <div class="text-center">
                              <i class="ri-file-pdf-line text-xl mb-1"></i>
                              <p class="text-sm">PDF</p>
                            </div>
                          </label>
                          <label
                            class="flex items-center justify-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary hover:bg-blue-50">
                            <input type="radio" name="exportFormat" value="excel" class="hidden">
                            <div class="text-center">
                              <i class="ri-file-excel-line text-xl mb-1"></i>
                              <p class="text-sm">Excel</p>
                            </div>
                          </label>
                          <label
                            class="flex items-center justify-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary hover:bg-blue-50">
                            <input type="radio" name="exportFormat" value="csv" class="hidden">
                            <div class="text-center">
                              <i class="ri-file-text-line text-xl mb-1"></i>
                              <p class="text-sm">CSV</p>
                            </div>
                          </label>
                        </div>
                      </div>
                      <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">报告内容</label>
                        <div class="space-y-2">
                          <label class="flex items-center">
                            <input type="checkbox" name="reportContent" value="current" class="hidden" checked>
                            <span class="flex h-5 w-5 items-center justify-center border border-gray-300 rounded mr-2">
                              <i class="ri-check-line text-primary hidden"></i>
                            </span>
                            <span class="text-sm text-gray-700">当前模型性能数据</span>
                          </label>
                          <label class="flex items-center">
                            <input type="checkbox" name="reportContent" value="comparison" class="hidden" checked>
                            <span class="flex h-5 w-5 items-center justify-center border border-gray-300 rounded mr-2">
                              <i class="ri-check-line text-primary hidden"></i>
                            </span>
                            <span class="text-sm text-gray-700">版本对比分析</span>
                          </label>
                          <label class="flex items-center">
                            <input type="checkbox" name="reportContent" value="trend" class="hidden" checked>
                            <span class="flex h-5 w-5 items-center justify-center border border-gray-300 rounded mr-2">
                              <i class="ri-check-line text-primary hidden"></i>
                            </span>
                            <span class="text-sm text-gray-700">历史趋势数据</span>
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                      <button id="cancelExportReport"
                        class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                      <button id="confirmExportReport"
                        class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">导出报告</button>
                    </div>
                  </div>
                </div>
                <!-- 导出进度模态框 -->
                <div id="exportProgressModal"
                  class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                  <div class="bg-white rounded-lg w-full max-w-md p-6">
                    <div class="flex flex-col items-center">
                      <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                        <i id="exportProgressIcon" class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                      </div>
                      <h3 class="text-lg font-medium text-gray-900 mb-2">正在导出报告</h3>
                      <p id="exportProgressText" class="text-sm text-gray-500 mb-4">正在生成报告，请稍候...</p>
                      <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                        <div id="exportProgressBar" class="bg-primary h-2 rounded-full transition-all duration-300"
                          style="width: 0%"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="radarChart" class="h-80"></div>
            </div>
            <div class="bg-white border border-gray-200 rounded-lg p-4">
              <div class="flex justify-between items-center mb-4">
                <h4 class="text-sm font-medium text-gray-700">版本对比</h4>
                <div>
                  <select
                    class="pl-3 pr-8 py-1.5 border border-gray-300 rounded-button text-xs focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none bg-white">
                    <option>对比最近3个版本</option>
                    <option>对比最近5个版本</option>
                    <option>自定义对比</option>
                  </select>
                </div>
              </div>
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead class="bg-gray-50">
                    <tr>
                      <th scope="col"
                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">指标</th>
                      <th scope="col"
                        class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">v2.3.5
                      </th>
                      <th scope="col"
                        class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">v2.3.4
                      </th>
                      <th scope="col"
                        class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">v2.3.3
                      </th>
                      <th scope="col"
                        class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">变化</th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">准确率</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">92.7%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">91.5%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">90.8%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">+1.2%</td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">召回率</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">88.3%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">87.2%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">86.5%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">+1.1%</td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">F1值</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">90.4%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">89.3%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">88.6%</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">+1.1%</td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">推理时间</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">25ms</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">28ms</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">30ms</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">-3ms</td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">内存占用</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">850MB</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">880MB</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">900MB</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">-30MB</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <!-- 部署配置 Tab -->
          <div id="deployment" class="tab-content">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="md:col-span-2">
                <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6">
                  <h4 class="text-sm font-medium text-gray-700 mb-4">当前部署状态</h4>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">部署环境</p>
                      <p class="text-sm font-medium text-gray-700">生产环境</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">部署方式</p>
                      <p class="text-sm font-medium text-gray-700">容器化部署</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">实例数量</p>
                      <p class="text-sm font-medium text-gray-700">8</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">部署时间</p>
                      <p class="text-sm font-medium text-gray-700">2025-05-12 15:32</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">部署人员</p>
                      <p class="text-sm font-medium text-gray-700">张伟峰</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">运行状态</p>
                      <p class="text-sm font-medium text-green-500">正常</p>
                    </div>
                  </div>
                  <h4 class="text-sm font-medium text-gray-700 mb-4">资源配置</h4>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">CPU</p>
                      <p class="text-sm font-medium text-gray-700">4 核</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">内存</p>
                      <p class="text-sm font-medium text-gray-700">16 GB</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">GPU</p>
                      <p class="text-sm font-medium text-gray-700">NVIDIA T4</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">存储</p>
                      <p class="text-sm font-medium text-gray-700">100 GB SSD</p>
                    </div>
                  </div>
                  <h4 class="text-sm font-medium text-gray-700 mb-4">服务配置</h4>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">服务类型</p>
                      <p class="text-sm font-medium text-gray-700">RESTful API</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">最大并发</p>
                      <p class="text-sm font-medium text-gray-700">200 请求/秒</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">超时设置</p>
                      <p class="text-sm font-medium text-gray-700">3000 ms</p>
                    </div>
                    <div class="bg-gray-50 p-3 rounded">
                      <p class="text-xs text-gray-500">自动扩缩容</p>
                      <p class="text-sm font-medium text-gray-700">已启用</p>
                    </div>
                  </div>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-6">
                  <div class="flex justify-between items-center mb-4">
                    <h4 class="text-sm font-medium text-gray-700">部署历史</h4>
                    <button class="text-primary text-sm hover:text-blue-600">查看全部</button>
                  </div>
                  <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                      <thead class="bg-gray-50">
                        <tr>
                          <th scope="col"
                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间
                          </th>
                          <th scope="col"
                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">版本
                          </th>
                          <th scope="col"
                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">环境
                          </th>
                          <th scope="col"
                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作人
                          </th>
                          <th scope="col"
                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态
                          </th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-12 15:32</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.5</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">生产环境</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                          <td class="px-4 py-3 whitespace-nowrap">
                            <span
                              class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                          </td>
                        </tr>
                        <tr>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-10 11:15</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.5</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">测试环境</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                          <td class="px-4 py-3 whitespace-nowrap">
                            <span
                              class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                          </td>
                        </tr>
                        <tr>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-04-28 09:45</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.4</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">生产环境</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                          <td class="px-4 py-3 whitespace-nowrap">
                            <span
                              class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                          </td>
                        </tr>
                        <tr>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-04-25 14:20</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.4</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">测试环境</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">王晓东</td>
                          <td class="px-4 py-3 whitespace-nowrap">
                            <span
                              class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                          </td>
                        </tr>
                        <tr>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-04-15 10:30</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.3</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">生产环境</td>
                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                          <td class="px-4 py-3 whitespace-nowrap">
                            <span
                              class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                  <h4 class="text-sm font-medium text-gray-700 mb-3">部署操作</h4>
                  <div class="space-y-3">
                    <button id="redeployBtn"
                      class="w-full px-3 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">重新部署</button>
                    <!-- 重新部署确认对话框 -->
                    <div id="redeployConfirmModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">确认重新部署</h3>
                        <div class="space-y-4 mb-6">
                          <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="space-y-3">
                              <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">模型版本</span>
                                <span class="text-sm font-medium text-gray-900">v2.3.5</span>
                              </div>
                              <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">部署环境</span>
                                <span class="text-sm font-medium text-gray-900">生产环境</span>
                              </div>
                              <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">实例数量</span>
                                <span class="text-sm font-medium text-gray-900">8个</span>
                              </div>
                            </div>
                          </div>
                          <div class="bg-yellow-50 p-4 rounded-lg">
                            <div class="flex items-start">
                              <div class="w-5 h-5 flex-shrink-0 flex items-center justify-center mt-0.5">
                                <i class="ri-error-warning-line text-yellow-500"></i>
                              </div>
                              <div class="ml-3">
                                <h4 class="text-sm font-medium text-yellow-800">预计影响范围</h4>
                                <ul class="mt-2 text-sm text-yellow-700 list-disc list-inside">
                                  <li>服务将会短暂中断 1-2 分钟</li>
                                  <li>可能影响约 10,000 个在线用户</li>
                                  <li>建议在流量低峰期进行部署</li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="flex justify-end space-x-3">
                          <button id="cancelRedeploy"
                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                          <button id="confirmRedeploy"
                            class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认部署</button>
                        </div>
                      </div>
                    </div>
                    <!-- 部署进度对话框 -->
                    <div id="redeployProgressModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <div class="flex flex-col items-center">
                          <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                            <i id="redeployProgressIcon"
                              class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                          </div>
                          <h3 class="text-lg font-medium text-gray-900 mb-2">正在重新部署</h3>
                          <p id="redeployProgressText" class="text-sm text-gray-500 mb-4">正在准备部署环境...</p>
                          <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                            <div id="redeployProgressBar"
                              class="bg-primary h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <button id="rollbackButton"
                      class="w-full px-3 py-2 bg-white border border-gray-300 text-gray-700 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button">回滚到上一版本</button>
                    <!-- 回滚确认对话框 -->
                    <div id="rollbackConfirmModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">确认回滚操作</h3>
                        <div class="space-y-4 mb-6">
                          <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="space-y-3">
                              <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">当前版本</span>
                                <span class="text-sm font-medium text-gray-900">v2.3.5</span>
                              </div>
                              <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">回滚至版本</span>
                                <span class="text-sm font-medium text-gray-900">v2.3.4</span>
                              </div>
                              <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">部署环境</span>
                                <span class="text-sm font-medium text-gray-900">生产环境</span>
                              </div>
                            </div>
                          </div>
                          <div class="bg-yellow-50 p-4 rounded-lg">
                            <div class="flex items-start">
                              <div class="w-5 h-5 flex-shrink-0 flex items-center justify-center mt-0.5">
                                <i class="ri-error-warning-line text-yellow-500"></i>
                              </div>
                              <div class="ml-3">
                                <h4 class="text-sm font-medium text-yellow-800">预计影响范围</h4>
                                <ul class="mt-2 text-sm text-yellow-700 list-disc list-inside">
                                  <li>服务将会短暂中断 1-2 分钟</li>
                                  <li>可能影响约 10,000 个在线用户</li>
                                  <li>建议在流量低峰期进行回滚</li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="flex justify-end space-x-3">
                          <button id="cancelRollback"
                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                          <button id="confirmRollback"
                            class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认回滚</button>
                        </div>
                      </div>
                    </div>
                    <!-- 回滚进度对话框 -->
                    <div id="rollbackProgressModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <div class="flex flex-col items-center">
                          <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                            <i id="rollbackProgressIcon"
                              class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                          </div>
                          <h3 class="text-lg font-medium text-gray-900 mb-2">正在回滚</h3>
                          <p id="rollbackProgressText" class="text-sm text-gray-500 mb-4">正在准备回滚环境...</p>
                          <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                            <div id="rollbackProgressBar"
                              class="bg-primary h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <button id="scaleInstancesBtn"
                      class="w-full px-3 py-2 bg-white border border-gray-300 text-gray-700 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button">扩展实例数量</button>
                    <!-- 扩展实例模态框 -->
                    <div id="scaleInstancesModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <div class="flex justify-between items-center mb-6">
                          <h3 class="text-lg font-medium text-gray-900">扩展实例数量</h3>
                          <button id="closeScaleModal" class="text-gray-400 hover:text-gray-500">
                            <i class="ri-close-line ri-lg"></i>
                          </button>
                        </div>
                        <div class="space-y-6">
                          <div>
                            <div class="flex justify-between items-center mb-2">
                              <label class="block text-sm font-medium text-gray-700">当前实例数量</label>
                              <span class="text-sm font-medium text-gray-900">8 个</span>
                            </div>
                            <div class="mb-6">
                              <label class="block text-sm font-medium text-gray-700 mb-2">目标实例数量</label>
                              <div class="flex items-center space-x-4">
                                <input type="range" id="instanceSlider" min="1" max="20" value="8"
                                  class="custom-range flex-grow">
                                <input type="number" id="instanceInput" value="8" min="1" max="20"
                                  class="w-20 px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                              </div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 mb-6">
                              <h4 class="text-sm font-medium text-gray-700 mb-3">资源消耗预估</h4>
                              <div class="space-y-2">
                                <div class="flex justify-between items-center">
                                  <span class="text-sm text-gray-600">CPU 总消耗</span>
                                  <span id="cpuEstimate" class="text-sm font-medium text-gray-900">32 核</span>
                                </div>
                                <div class="flex justify-between items-center">
                                  <span class="text-sm text-gray-600">内存总消耗</span>
                                  <span id="memoryEstimate" class="text-sm font-medium text-gray-900">128 GB</span>
                                </div>
                                <div class="flex justify-between items-center">
                                  <span class="text-sm text-gray-600">预计每月成本</span>
                                  <span id="costEstimate" class="text-sm font-medium text-gray-900">¥3,200</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="flex justify-end space-x-3">
                            <button id="cancelScale"
                              class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                            <button id="confirmScale"
                              class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认扩展</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 扩展进度模态框 -->
                    <div id="scaleProgressModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <div class="flex flex-col items-center">
                          <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                            <i id="scaleProgressIcon" class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                          </div>
                          <h3 class="text-lg font-medium text-gray-900 mb-2">正在扩展实例</h3>
                          <p id="scaleProgressText" class="text-sm text-gray-500 mb-4">正在准备扩展环境...</p>
                          <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                            <div id="scaleProgressBar" class="bg-primary h-2 rounded-full transition-all duration-300"
                              style="width: 0%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <button id="stopServiceBtn"
                      class="w-full px-3 py-2 bg-white border border-red-300 text-red-600 rounded-button text-sm font-medium hover:bg-red-50 whitespace-nowrap !rounded-button">停止服务</button>
                    <!-- 停止服务确认模态框 -->
                    <div id="stopServiceModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <div class="flex flex-col items-center mb-6">
                          <div
                            class="w-12 h-12 flex items-center justify-center rounded-full bg-red-50 text-red-600 mb-4">
                            <i class="ri-alert-line text-xl"></i>
                          </div>
                          <h3 class="text-lg font-medium text-gray-900">确认停止服务？</h3>
                          <p class="text-sm text-gray-500 text-center mt-2">此操作将停止所有正在运行的服务实例</p>
                        </div>
                        <div class="bg-red-50 p-4 rounded-lg mb-6">
                          <div class="flex items-start">
                            <div class="w-5 h-5 flex-shrink-0 flex items-center justify-center mt-0.5">
                              <i class="ri-error-warning-line text-red-500"></i>
                            </div>
                            <div class="ml-3">
                              <h4 class="text-sm font-medium text-red-800">风险提示</h4>
                              <ul class="mt-2 text-sm text-red-700 list-disc list-inside space-y-1">
                                <li>服务将立即停止，预计中断时间 5-10 分钟</li>
                                <li>将影响约 10,000 个在线用户</li>
                                <li>所有正在处理的请求将被中断</li>
                                <li>相关依赖服务可能受到影响</li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="flex justify-end space-x-3">
                          <button id="cancelStopService"
                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                          <button id="confirmStopService"
                            class="px-4 py-2 bg-red-600 text-white rounded-button text-sm font-medium hover:bg-red-700 whitespace-nowrap !rounded-button">确认停止</button>
                        </div>
                      </div>
                    </div>
                    <!-- 停止进度模态框 -->
                    <div id="stopProgressModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <div class="flex flex-col items-center">
                          <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-red-50">
                            <i id="stopProgressIcon" class="ri-loader-4-line text-red-600 text-2xl animate-spin"></i>
                          </div>
                          <h3 class="text-lg font-medium text-gray-900 mb-2">正在停止服务</h3>
                          <p id="stopProgressText" class="text-sm text-gray-500 mb-4">正在关闭服务实例...</p>
                          <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                            <div id="stopProgressBar" class="bg-red-600 h-2 rounded-full transition-all duration-300"
                              style="width: 0%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                  <h4 class="text-sm font-medium text-gray-700 mb-3">环境切换</h4>
                  <div class="mb-4">
                    <div class="flex items-center mb-2">
                      <label class="custom-radio">
                        <input type="radio" name="environment" value="production" checked>
                        <span class="radiomark"></span>
                      </label>
                      <span class="text-sm text-gray-700">生产环境</span>
                    </div>
                    <div class="flex items-center mb-2">
                      <label class="custom-radio">
                        <input type="radio" name="environment" value="testing">
                        <span class="radiomark"></span>
                      </label>
                      <span class="text-sm text-gray-700">测试环境</span>
                    </div>
                    <div class="flex items-center">
                      <label class="custom-radio">
                        <input type="radio" name="environment" value="development">
                        <span class="radiomark"></span>
                      </label>
                      <span class="text-sm text-gray-700">开发环境</span>
                    </div>
                  </div>
                  <button id="switchEnvironmentBtn"
                    class="w-full px-3 py-2 bg-white border border-gray-300 text-gray-700 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button">切换环境</button>
                </div>
                <!-- 环境切换确认模态框 -->
                <div id="switchEnvironmentModal"
                  class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                  <div class="bg-white rounded-lg w-full max-w-md p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">确认切换环境</h3>
                    <div class="space-y-4 mb-6">
                      <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="space-y-3">
                          <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">当前环境</span>
                            <span id="currentEnv" class="text-sm font-medium text-gray-900">生产环境</span>
                          </div>
                          <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">目标环境</span>
                            <span id="targetEnv" class="text-sm font-medium text-gray-900">测试环境</span>
                          </div>
                        </div>
                      </div>
                      <div class="bg-yellow-50 p-4 rounded-lg">
                        <div class="flex items-start">
                          <div class="w-5 h-5 flex-shrink-0 flex items-center justify-center mt-0.5">
                            <i class="ri-error-warning-line text-yellow-500"></i>
                          </div>
                          <div class="ml-3">
                            <h4 class="text-sm font-medium text-yellow-800">切换提示</h4>
                            <ul class="mt-2 text-sm text-yellow-700 list-disc list-inside">
                              <li>切换环境后，当前环境的配置将会被保存</li>
                              <li>所有监控数据和图表将会更新</li>
                              <li>请确保已保存当前工作内容</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="flex justify-end space-x-3">
                      <button id="cancelSwitchEnvironment"
                        class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                      <button id="confirmSwitchEnvironment"
                        class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认切换</button>
                    </div>
                  </div>
                </div>
                <!-- 切换进度模态框 -->
                <div id="switchProgressModal"
                  class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                  <div class="bg-white rounded-lg w-full max-w-md p-6">
                    <div class="flex flex-col items-center">
                      <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                        <i id="switchProgressIcon" class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                      </div>
                      <h3 class="text-lg font-medium text-gray-900 mb-2">正在切换环境</h3>
                      <p id="switchProgressText" class="text-sm text-gray-500 mb-4">正在准备切换环境...</p>
                      <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                        <div id="switchProgressBar" class="bg-primary h-2 rounded-full transition-all duration-300"
                          style="width: 0%"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4">
                  <h4 class="text-sm font-medium text-gray-700 mb-3">资源配置调整</h4>
                  <div class="mb-4">
                    <label class="block text-xs text-gray-500 mb-1">CPU 核心数</label>
                    <div class="flex items-center">
                      <span class="text-xs text-gray-500 mr-2">2</span>
                      <input type="range" min="2" max="16" value="4" class="custom-range flex-grow">
                      <span class="text-xs text-gray-500 ml-2">16</span>
                    </div>
                    <div class="text-right text-xs text-gray-700 mt-1">当前: 4 核</div>
                  </div>
                  <div class="mb-4">
                    <label class="block text-xs text-gray-500 mb-1">内存 (GB)</label>
                    <div class="flex items-center">
                      <span class="text-xs text-gray-500 mr-2">8</span>
                      <input type="range" min="8" max="64" value="16" class="custom-range flex-grow">
                      <span class="text-xs text-gray-500 ml-2">64</span>
                    </div>
                    <div class="text-right text-xs text-gray-700 mt-1">当前: 16 GB</div>
                  </div>
                  <div class="mb-4">
                    <label class="block text-xs text-gray-500 mb-1">实例数量</label>
                    <div class="flex items-center">
                      <span class="text-xs text-gray-500 mr-2">1</span>
                      <input type="range" min="1" max="20" value="8" class="custom-range flex-grow">
                      <span class="text-xs text-gray-500 ml-2">20</span>
                    </div>
                    <div class="text-right text-xs text-gray-700 mt-1">当前: 8 个</div>
                  </div>
                  <div>
                    <button id="applyConfigBtn"
                      class="w-full px-3 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">应用配置</button>
                    <!-- 确认对话框 -->
                    <div id="confirmConfigModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">确认应用新配置</h3>
                        <div class="space-y-3 mb-6">
                          <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">CPU 核心数</span>
                            <span id="confirmCpuValue" class="text-sm font-medium text-gray-900"></span>
                          </div>
                          <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">内存大小</span>
                            <span id="confirmMemoryValue" class="text-sm font-medium text-gray-900"></span>
                          </div>
                          <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">实例数量</span>
                            <span id="confirmInstanceValue" class="text-sm font-medium text-gray-900"></span>
                          </div>
                        </div>
                        <div class="flex justify-end space-x-3">
                          <button id="cancelConfigBtn"
                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                          <button id="confirmConfigBtn"
                            class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认应用</button>
                        </div>
                      </div>
                    </div>
                    <!-- 进度对话框 -->
                    <div id="progressConfigModal"
                      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                      <div class="bg-white rounded-lg w-full max-w-md p-6">
                        <div class="flex flex-col items-center">
                          <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                            <i id="progressIcon" class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                          </div>
                          <h3 class="text-lg font-medium text-gray-900 mb-2">正在应用配置</h3>
                          <p id="progressText" class="text-sm text-gray-500 mb-4">请稍候，正在更新资源配置...</p>
                          <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                            <div id="progressBar" class="bg-primary h-2 rounded-full transition-all duration-300"
                              style="width: 0%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 监控数据 Tab -->
          <div id="monitoring" class="tab-content">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
              <div class="bg-white border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-medium text-gray-700 mb-2">请求量</h4>
                <div class="flex items-center mb-2">
                  <span class="text-2xl font-bold text-gray-900">1,258</span>
                  <span class="ml-2 text-xs text-green-500">+5.7%</span>
                </div>
                <p class="text-xs text-gray-500">过去 24 小时</p>
                <div id="requestChart" class="h-32 mt-2"></div>
              </div>
              <div class="bg-white border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-medium text-gray-700 mb-2">平均响应时间</h4>
                <div class="flex items-center mb-2">
                  <span class="text-2xl font-bold text-gray-900">25ms</span>
                  <span class="ml-2 text-xs text-green-500">-3.1%</span>
                </div>
                <p class="text-xs text-gray-500">过去 24 小时</p>
                <div id="responseTimeChart" class="h-32 mt-2"></div>
              </div>
              <div class="bg-white border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-medium text-gray-700 mb-2">错误率</h4>
                <div class="flex items-center mb-2">
                  <span class="text-2xl font-bold text-gray-900">0.05%</span>
                  <span class="ml-2 text-xs text-green-500">-0.02%</span>
                </div>
                <p class="text-xs text-gray-500">过去 24 小时</p>
                <div id="errorRateChart" class="h-32 mt-2"></div>
              </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div class="bg-white border border-gray-200 rounded-lg p-4">
                <div class="flex justify-between items-center mb-4">
                  <h4 class="text-sm font-medium text-gray-700">CPU 使用率</h4>
                  <div class="flex space-x-2">
                    <button
                      class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">1小时</button>
                    <button
                      class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">6小时</button>
                    <button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">24小时</button>
                  </div>
                </div>
                <div id="cpuUsageChart" class="h-64"></div>
              </div>
              <div class="bg-white border border-gray-200 rounded-lg p-4">
                <div class="flex justify-between items-center mb-4">
                  <h4 class="text-sm font-medium text-gray-700">内存使用率</h4>
                  <div class="flex space-x-2">
                    <button
                      class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">1小时</button>
                    <button
                      class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">6小时</button>
                    <button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">24小时</button>
                  </div>
                </div>
                <div id="memoryUsageChart" class="h-64"></div>
              </div>
            </div>
            <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
              <div class="flex justify-between items-center mb-4">
                <h4 class="text-sm font-medium text-gray-700">请求分布</h4>
                <div class="flex space-x-2">
                  <button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">查看详情</button>
                </div>
              </div>
              <div id="requestDistributionChart" class="h-64"></div>
            </div>
            <div class="bg-white border border-gray-200 rounded-lg p-4">
              <div class="flex justify-between items-center mb-4">
                <h4 class="text-sm font-medium text-gray-700">告警历史</h4>
                <button class="text-primary text-sm hover:text-blue-600">查看全部</button>
              </div>
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead class="bg-gray-50">
                    <tr>
                      <th scope="col"
                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                      <th scope="col"
                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                      <th scope="col"
                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
                      <th scope="col"
                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-20 08:45</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">警告</span>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-500">CPU 使用率超过 80%</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已解决</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-18 15:20</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full">严重</span>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-500">服务实例异常退出</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已解决</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-15 10:05</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">警告</span>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-500">响应时间超过阈值</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已解决</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-10 22:30</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full">信息</span>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-500">系统自动扩容</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已记录</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-05 14:15</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">警告</span>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-500">内存使用率超过 75%</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已解决</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑模型模态框 -->
    <div id="editModelModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
      <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center p-6 border-b border-gray-100">
          <h3 class="text-lg font-medium text-gray-900">编辑模型</h3>
          <button id="closeEditModal" class="text-gray-400 hover:text-gray-500">
            <i class="ri-close-line ri-lg"></i>
          </button>
        </div>
        <div class="p-6">
          <div class="mb-6">
            <div class="flex justify-between items-center mb-2">
              <label class="block text-sm font-medium text-gray-700">模型基本信息</label>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">模型名称</label>
                <input type="text" id="editModelName"
                  class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="输入模型名称">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">版本号</label>
                <input type="text" id="editModelVersion"
                  class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="例如：v1.0.0">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">框架</label>
                <select id="editModelFramework"
                  class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
                  <option>PyTorch</option>
                  <option>TensorFlow</option>
                  <option>ONNX</option>
                  <option>Scikit-learn</option>
                  <option>其他</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                <select id="editModelStatus"
                  class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
                  <option>已部署</option>
                  <option>待优化</option>
                  <option>测试中</option>
                  <option>已退役</option>
                </select>
              </div>
            </div>
          </div>
          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1">模型描述</label>
            <textarea id="editModelDescription"
              class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              rows="3" placeholder="输入模型的详细描述"></textarea>
          </div>
          <div class="mb-6">
            <div class="flex justify-between items-center mb-2">
              <label class="block text-sm font-medium text-gray-700">性能指标</label>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">准确率</label>
                <div class="flex items-center">
                  <input type="number" id="editModelAccuracy"
                    class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                    placeholder="输入准确率">
                  <span class="ml-2 text-sm text-gray-500">%</span>
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">推理时间</label>
                <div class="flex items-center">
                  <input type="number" id="editModelInferenceTime"
                    class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                    placeholder="输入推理时间">
                  <span class="ml-2 text-sm text-gray-500">ms</span>
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-end space-x-3">
            <button id="cancelEditModel"
              class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
            <button id="saveEditModel"
              class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">保存修改</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 版本详情模态框 -->
    <div id="versionDetailsModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
      <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center p-6 border-b border-gray-100">
          <div class="flex items-center">
            <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary mr-3">
              <i class="ri-git-branch-line"></i>
            </div>
            <div>
              <h3 class="text-lg font-medium text-gray-900">v2.3.5</h3>
              <p class="text-sm text-gray-500">发布于 2025-05-12</p>
            </div>
          </div>
          <button id="closeVersionDetailsModal" class="text-gray-400 hover:text-gray-500">
            <i class="ri-close-line ri-lg"></i>
          </button>
        </div>
        <div class="p-6">
          <div class="mb-8">
            <h4 class="text-sm font-medium text-gray-700 mb-4">版本变更日志</h4>
            <div class="bg-gray-50 rounded-lg p-4">
              <div class="space-y-4">
                <div>
                  <h5 class="text-sm font-medium text-gray-900 mb-2">功能改进</h5>
                  <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
                    <li>优化了推荐算法的特征工程流程，提升了模型的泛化能力</li>
                    <li>新增用户行为序列建模模块，提高了个性化推荐的准确性</li>
                    <li>改进了冷启动策略，优化了新用户的推荐体验</li>
                  </ul>
                </div>
                <div>
                  <h5 class="text-sm font-medium text-gray-900 mb-2">性能优化</h5>
                  <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
                    <li>通过模型剪枝和量化，将推理时间从 28ms 降低到 25ms</li>
                    <li>优化了模型结构，减少了 30MB 的内存占用</li>
                    <li>提升了批量处理能力，单机 QPS 提升 20%</li>
                  </ul>
                </div>
                <div>
                  <h5 class="text-sm font-medium text-gray-900 mb-2">问题修复</h5>
                  <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
                    <li>修复了特定场景下的数值溢出问题</li>
                    <li>解决了多线程并发访问时的内存泄漏问题</li>
                    <li>修复了模型预热阶段的性能抖动问题</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="mb-8">
            <h4 class="text-sm font-medium text-gray-700 mb-4">文件信息</h4>
            <div class="bg-gray-50 rounded-lg p-4">
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <p class="text-xs text-gray-500 mb-1">文件大小</p>
                  <p class="text-sm font-medium text-gray-900">1.2 GB</p>
                </div>
                <div>
                  <p class="text-xs text-gray-500 mb-1">MD5</p>
                  <p class="text-sm font-medium text-gray-900">8f7d3b2e1a5c4f6g9h0i</p>
                </div>
                <div>
                  <p class="text-xs text-gray-500 mb-1">上传者</p>
                  <p class="text-sm font-medium text-gray-900">张伟峰</p>
                </div>
                <div>
                  <p class="text-xs text-gray-500 mb-1">上传时间</p>
                  <p class="text-sm font-medium text-gray-900">2025-05-12 14:30</p>
                </div>
              </div>
            </div>
          </div>
          <div class="mb-8">
            <h4 class="text-sm font-medium text-gray-700 mb-4">部署记录</h4>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col"
                      class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                    <th scope="col"
                      class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">环境</th>
                    <th scope="col"
                      class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作人</th>
                    <th scope="col"
                      class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    <th scope="col"
                      class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-12 15:32</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">生产环境</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500">正常发布</td>
                  </tr>
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-10 11:15</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">预发环境</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500">验证通过</td>
                  </tr>
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-08 09:30</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">测试环境</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">王晓东</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500">自动化测试通过</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="flex justify-between items-center">
            <div class="flex space-x-3">
              <button
                class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">
                <div class="w-4 h-4 flex items-center justify-center mr-2 inline-block">
                  <i class="ri-download-line"></i>
                </div>
                下载模型文件
              </button>
              <button
                class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">
                <div class="w-4 h-4 flex items-center justify-center mr-2 inline-block">
                  <i class="ri-file-text-line"></i>
                </div>
                导出文档
              </button>
            </div>
            <div class="flex space-x-3">
              <button
                class="px-4 py-2 bg-white border border-red-300 rounded-button text-sm font-medium text-red-600 hover:bg-red-50 whitespace-nowrap !rounded-button">回滚到此版本</button>
              <button
                class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">部署此版本</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import Sidebar from '../components/Sidebar.vue'
import * as echarts from 'echarts'

export default {
  name: 'ModelLifecycle',
  components: {
    Header,
    Sidebar,

  },
  data() {
    return {
      echarts: null,
      userInfo: {
        name: '陈思远',
        avatar: 'https://readdy.ai/api/search-image?query=professional%20headshot%20of%20a%20young%20asian%20man%20with%20short%20black%20hair%2C%20business%20casual%20attire%2C%20neutral%20background%2C%20high%20quality%20portrait&width=80&height=80&seq=1&orientation=squarish'
      },
      toast: {
        visible: false,
        message: '',
        icon: 'ri-checkbox-circle-line'
      },
      isRefreshing: false,
      viewMode: 'grid',
      currentStatusFilter: 'all',
      statusFilters: [
        { label: '本周', value: 'week' },
        { label: '本月', value: 'month' },
        { label: '全部', value: 'all' }
      ],
      overviewCards: [
        {
          title: '模型总数',
          value: 48,
          icon: 'ri-cube-line',
          iconBgClass: 'bg-blue-50 text-primary',
          subtitle: '较上月',
          subtitleValue: '+12.5%',
          subtitleClass: 'text-green-500'
        },
        {
          title: '已部署模型',
          value: 32,
          icon: 'ri-rocket-line',
          iconBgClass: 'bg-green-50 text-green-500',
          subtitle: '部署率',
          subtitleValue: '66.7%',
          subtitleClass: 'text-green-500'
        },
        {
          title: '待优化模型',
          value: 8,
          icon: 'ri-tools-line',
          iconBgClass: 'bg-yellow-50 text-yellow-500',
          subtitle: '较上月',
          subtitleValue: '+2',
          subtitleClass: 'text-red-500'
        },
        {
          title: '已退役模型',
          value: 12,
          icon: 'ri-archive-line',
          iconBgClass: 'bg-red-50 text-red-500',
          subtitle: '资源回收率',
          subtitleValue: '100%',
          subtitleClass: 'text-green-500'
        }
      ]
    }
  },

  mounted() {
    // 在 DOM 渲染完成后初始化所有功能
    this.$nextTick(() => {
      this.initializeCharts()
      this.initializeModalHandlers()
      this.initializeVersionDetailsHandler()
    })
  },

  beforeUnmount() {
    // 清理事件监听器和图表实例
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', this.handleResize)
    }
  },

  methods: {
    // Header 事件处理
    handleSearch(query) {
      console.log('搜索:', query)
    },

    handleNotification() {
      console.log('打开通知')
    },

    handleSettings() {
      console.log('打开设置')
    },

    handleUserMenu() {
      console.log('打开用户菜单')
    },

    // Sidebar 事件处理
    handleLogoClick() {
      console.log('Logo 点击')
    },

    handleMenuChange(menuName) {
      console.log('菜单切换:', menuName)
    },

    handleSubMenuChange(subMenuName) {
      console.log('子菜单切换:', subMenuName)
    },

    // 页面操作
    handleRefresh() {
      this.isRefreshing = true
      console.log('刷新数据')

      setTimeout(() => {
        this.isRefreshing = false
        this.showToast('数据已刷新', 'ri-checkbox-circle-line')
      }, 1000)
    },

    handleRegisterModel() {
      console.log('注册新模型')
    },

    showToast(message, icon = 'ri-checkbox-circle-line') {
      this.toast.message = message
      this.toast.icon = icon
      this.toast.visible = true

      setTimeout(() => {
        this.toast.visible = false
      }, 3000)
    },

    // 初始化图表
    initializeCharts() {
      // 模型状态分布图表
      const modelStatusChart = echarts.init(document.getElementById('modelStatusChart'))
      if (modelStatusChart) {
        const modelStatusOption = {
          animation: false,
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            borderColor: '#e2e8f0',
            borderWidth: 1,
            textStyle: {
              color: '#1f2937'
            }
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center'
          },
          series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 32, name: '已部署' },
              { value: 8, name: '待优化' },
              { value: 8, name: '开发中' }
            ]
          }]
        }
        modelStatusChart.setOption(modelStatusOption)
      }

      // 模型框架分布图表
      const modelFrameworkChart = echarts.init(document.getElementById('modelFrameworkChart'))
      if (modelFrameworkChart) {
        const modelFrameworkOption = {
          animation: false,
          tooltip: {
            trigger: 'item'
          },
          series: [{
            type: 'pie',
            radius: '50%',
            data: [
              { value: 20, name: 'TensorFlow' },
              { value: 15, name: 'PyTorch' },
              { value: 10, name: 'ONNX' },
              { value: 3, name: '其他' }
            ]
          }]
        }
        modelFrameworkChart.setOption(modelFrameworkOption)
      }

      // 响应式调整
      this.handleResize = () => {
        if (modelStatusChart) modelStatusChart.resize()
        if (modelFrameworkChart) modelFrameworkChart.resize()
      }
      window.addEventListener('resize', this.handleResize)
    },

    // 初始化模态框处理器
    initializeModalHandlers() {
      // 模态框相关的事件监听器
      console.log('Modal handlers initialized')
    },

    // 初始化版本详情处理器
    initializeVersionDetailsHandler() {
      const versionDetailsModal = document.getElementById('versionDetailsModal')
      const closeVersionDetailsModal = document.getElementById('closeVersionDetailsModal')

      if (versionDetailsModal && closeVersionDetailsModal) {
        closeVersionDetailsModal.addEventListener('click', () => {
          versionDetailsModal.classList.add('hidden')
        })

        versionDetailsModal.addEventListener('click', (event) => {
          if (event.target === versionDetailsModal) {
            versionDetailsModal.classList.add('hidden')
          }
        })
      }
    }
  }
}
</script>

<style scoped>
:where([class^="ri-"])::before {
  content: "\f3c2";
}

.model-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.model-card {
  transition: all 0.3s ease;
}

.custom-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.custom-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #3b82f6;
}

input:checked+.slider:before {
  transform: translateX(20px);
}

.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.custom-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 2px solid #d1d5db;
  border-radius: 4px;
}

.custom-checkbox input:checked~.checkmark {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked~.checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-radio {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.custom-radio input {
  opacity: 0;
  width: 0;
  height: 0;
}

.radiomark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 2px solid #d1d5db;
  border-radius: 50%;
}

.custom-radio input:checked~.radiomark {
  border-color: #3b82f6;
}

.radiomark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-radio input:checked~.radiomark:after {
  display: block;
}

.custom-radio .radiomark:after {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
}

.custom-range {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 5px;
  outline: none;
}

.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
}

.custom-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
}

.tab-active {
  color: #3b82f6;
  border-bottom: 2px solid #3b82f6;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}
</style>